<template>
  <div 
    ref="container" 
    class="virtual-list" 
    :style="{ height: `${props.height}px`, ...containerStyle }" 
    @scroll="handleScroll"
  >
    <!-- 占位元素，撑开滚动区域 -->
    <div :style="{ height: `${totalHeight}px` }" class="virtual-list-placeholder" />
    
    <!-- 可视内容区域 -->
    <div 
      ref="content" 
      class="virtual-list-content" 
      :style="{ transform: `translateY(${offset}px)`, ...contentStyle }"
    >
      <ul class="virtual-list-ul">
        <li 
          v-for="(item, index) in visibleList" 
          :key="index" 
          class="virtual-list-item"
          :style="{ height: `${props.itemHeight}px`, ...itemStyle }"
        >
          <!-- 数据展示区域 -->
          <div class="virtual-list-content-wrap">
            <span class="item-label">{{ item.name }}</span>
            <span class="item-data">{{ item.one==0?"第一次考试成绩":item.one }}</span>
            <span class="item-data">{{ item.tow==0?"第二次考试成绩":item.tow }}</span>
            <span class="item-data">{{ item.thre==0?"第三次考试成绩":item.thre }}</span>
            <div  v-if="item.one!== 0">
                <button class="btn delete-btn" v-delete="`delete`"  @click="handleDelete(item.id)"  >删除</button>
            <button class="btn update-btn" v-delete="`update`" @click="handleUpdate(item)"   >修改</button>
            </div>
            <div  v-else style="margin-right:40px" v-delete="`delete`" >
             <span>操作</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch, type Ref } from 'vue';
import _ from 'lodash';

// 定义 props
const props = defineProps<{
  list: Array<{ 
    name: string; 
    one: string; 
    tow: string; 
    thre: string; 
  }>; // 数据列表
  height: number; // 容器高度
  itemHeight: number; // 列表项高度，默认60px
}>();
const emit=defineEmits(['delete','update'])

// 内部状态
const container = ref<HTMLDivElement>(null) as Ref<HTMLDivElement>;
const content = ref<HTMLDivElement>(null) as Ref<HTMLDivElement>;
const startIndex = ref(0);
const endIndex = ref(0);
const offset = ref(0);
const totalHeight = computed(() => props.list.length * props.itemHeight);

// 计算样式
const containerStyle = computed(() => ({
  position: 'relative',
  overflowY: 'auto',
  backgroundColor: '#fff',
  border: '1px solid #e5e7eb',
  borderRadius: '8px',
  boxShadow: '0 2px 12px rgba(0,0,0,0.05)',
}));

const contentStyle = computed(() => ({
  position: 'absolute',
  width: '100%',
  left: 0,
  top: 0,
}));

const itemStyle = computed(() => ({
  padding: '12px 16px',
  borderBottom: '1px solid #f0f0f0',
  fontSize: '14px',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  transition: 'all 0.2s ease',

  // 鼠标悬停效果
  '&:hover': {
    backgroundColor: '#f8f9fa'
  }
}));

// 计算可见列表
const visibleList = computed(() => 
  props.list.slice(startIndex.value, endIndex.value)
);

// 滚动处理函数
const handleScroll = _.throttle((e: Event) => {
  if (!container.value) return;
  
  const scrollTop = (e.target as HTMLDivElement).scrollTop;
  startIndex.value = Math.floor(scrollTop / props.itemHeight);
  endIndex.value = startIndex.value + Math.ceil(container.value.clientHeight / props.itemHeight) + 1;
  
  // 防止越界
  endIndex.value = Math.min(endIndex.value, props.list.length);
  offset.value = startIndex.value * props.itemHeight;
}, 16); // 16ms节流，保证流畅度

// 生命周期钩子
onMounted(() => {
  if (container.value) {
    endIndex.value = Math.ceil(container.value.clientHeight / props.itemHeight) + 1;
  }
});

// 监听数据变化
watch(() => props.list, () => {
  startIndex.value = 0;
  endIndex.value = Math.ceil(container.value?.clientHeight / props.itemHeight) + 1 || 0;
  offset.value = 0;
});

// 假设的删除和修改方法，实际需要根据业务逻辑完善
const handleDelete = (index: number) => {

  emit('delete',index)
};

const handleUpdate = (index: number) => {
 
  emit('update',index)
};
</script>

<style scoped>
.virtual-list {
  width: 100%;
  margin: 0 auto;
}

.virtual-list-placeholder {
  width: 100%;
}

.virtual-list-content {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.virtual-list-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.virtual-list-item {
  box-sizing: border-box;
  width: 100%;
}

.virtual-list-content-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.item-label {
  font-weight: 500;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.item-data {
  color: #666;
  flex: 1;
  text-align: center;
}

/* 按钮样式 */
.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  margin-right: 5px;
}

.update-btn {
  background-color: #4caf50;
  color: white;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

.update-btn:hover {
  background-color: #43a047;
}

/* 滚动条样式 */
.virtual-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.virtual-list::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 3px;
}

.virtual-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.virtual-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
</style>